<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->

@section('content')
<style>
    .layui-card-body{overflow-y: scroll;}
    .eleTree {
        display: block;
        border: 1px #ccc solid;
        margin-left: 109px;
        height: 256px;
        overflow: scroll;
    }
</style>
<link rel="stylesheet" href="/static/admin/lib/eleTree/eleTree.css" media="all">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="L_role_name" class="layui-form-label">
                    <span class="x-red">*</span>角色名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_role_name" name="role_name" required="" lay-verify="role_name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_sort" class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_sort" name="sort" value="1" required="" lay-verify="sort" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">数字：1~99，越小优先级越高</div>
            </div>
            <div class="layui-form-item">
                <label for="L_note" class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_note" name="note" required="" lay-verify="note" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="display: none;">
                <label for="L_auth" class="layui-form-label">
                    <span class="x-red">*</span>权限
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_auth" name="auth" required="" lay-verify="auth" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_auth" class="layui-form-label">
                    <span class="x-red">*</span>权限
                </label>
                <div class="content1">
                    <div class="eleTree ele1" lay-filter="data1"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button></div>
        </form>
    </div>
</div>
<script>

    layui.config({
        base: "/static/admin/lib/eleTree/"
    }).use(['form', 'layer','jquery','table','eleTree','code'], function(){
        var $ = layui.jquery;
        var eleTree = layui.eleTree;
        var table = layui.table;
        var code = layui.code;
        var form = layui.form,
            layer = layui.layer;
        var authData = [];
        var authDataArr = [];

        //自定义验证规则
        form.verify({
            role_name: function(value) {
                if (value.length < 2 || value.length > 16) {
                    return '角色名必须为2到16的字符';
                }
            }
        });

        var data=[
            {
                "id": 1,
                "label": "安徽省",
                "children": [
                    {
                        "id": 2,
                        "label": "马鞍山市",
                        "disabled": true,
                        "children": [
                            {
                                "id": 3,
                                "label": "和县"
                            },
                            {
                                "id": 4,
                                "label": "花山区",
                                "checked": true
                            }
                        ]
                    },
                    {
                        "id": 22,
                        "label": "淮北市",
                        "children": [
                            {
                                "id": 23,
                                "label": "濉溪县"
                            },
                            {
                                "id": 24,
                                "label": "相山区",
                                "checked": true
                            }
                        ]
                    }
                ]
            },
            {
                "id": 5,
                "label": "河南省",
                "children": [
                    {
                        "id": 6,
                        "label": "郑州市"
                    }
                ]
            },
            {
                "id": 10,
                "label": "江苏省",
                "children": [
                    {
                        "id": 11,
                        "label": "苏州市"
                    },
                    {
                        "id": 12,
                        "label": "南京市",
                        "children": [
                            {
                                "id": 13,
                                "label": "姑苏区"
                            },
                            {
                                "id": 14,
                                "label": "相城区"
                            }
                        ]
                    }
                ]
            }
        ];

        var el = eleTree.render({
            elem: '.ele1',
            // data: data,
            url: '/admin/index/getMenuTreeData', // menu节点数据
            showCheckbox: true,
            defaultExpandAll: true,
            // defaultCheckedKeys: [23,24],
            done: function() {
                // el2.remove(24);
            }
        });
        eleTree.on("nodeChecked(data1)",function(d) {
            // console.group("节点选中nodeChecked:")
            // console.log(d.data);    // 点击节点对于的数据
            // console.log(d.isChecked);   // input是否被选中
            // console.log(d.node);    // 点击的dom节点
            // console.log(this);      // input对于的dom
            // console.log(el.getChecked(true,false)) // 获取选中的节点

            authData = el.getChecked(true,false);
            console.log(authData);
            authDataArr = [];
            if (authData.length>0){
                authData.forEach(function (item) {
                    console.log(item.id);
                    authDataArr.push(item.id);
                });
                console.log(authDataArr);
                /*Object.keys(authData).forEach(function (key) {
                    console.log(key, authData[key].id)
                });*/
            } else {
                // console.log(2)
            }
            $("#L_auth").val(authDataArr);

            console.groupEnd();
        });
        // layui.code({elem: ".pre1",about: true,title: "对应的代码",encode: true});
        // layui.code({elem: ".req1",about: true,title: "code",encode: true});

        var methods = {
            getChecked: function () {
                console.log(el.getChecked(true, false));
            }
        }


        //监听提交
        form.on('submit(add)', function(data) {
            console.log(data);
            //发异步，把数据提交给php
            $.ajax({
                type: 'POST',
                url: '/admin/admin/roleAdd',
                data: {
                    role_name: data.field.role_name,
                    auth: data.field.auth,
                    sort: data.field.sort,
                    note: data.field.note
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (data) {
                    // console.log(data);
                    if (data.code == 1) {
                        layer.alert("增加成功", {
                                icon: 6
                            },
                            function() {
                                //关闭当前frame
                                xadmin.close();

                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                    } else {
                        layer.alert(data.msg)
                    }
                },
                error: function (xhr, type) {
                    alert('Ajax error!')
                }
            });

            return false;
        });


    });
</script>
<script>
    layui.use('laydate',
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start', //指定元素
                type: 'datetime'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end', //指定元素
                type: 'datetime'
        });
    });
</script>

@endsection
